<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Location</title>
</head>

<body>

    <div id="container">
        <ul>
            <li>大一</li>
            <li>大二</li>
            <li>大三</li>
            <li>大四</li>
        </ul>
    </div>

    <script type="text/javascript">
        // 通过 document 中的方法，获取 指定的元素

        // 根据 id 获取元素
        let div = document.getElementById("container");
        console.log(div);

        // 获取 所有的子节点，返回的类型是 NodeList ，一个类数组对象（就是一个长得像数组的对象）
        let childNodes = div.childNodes;
        console.log(childNodes);
        console.log(childNodes[0].nodeType); // 此时是文本 3
        console.log(childNodes[1].nodeType); // 此时是元素 1

        console.log(div.attributes);

        // 返回 NamedNodeMap 的数据，有点类似于Java中的Map，也是键值对的形式
        let attributes = div.attributes;
        // 通过循环进行遍历
        for (let i = 0; i < attributes.length; i++) {
            console.log(attributes[i].name);
            console.log(attributes[i].value);

            console.log(attributes[i].nodeType); // 2
        }

    </script>


</body>

</html>